<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!Doctype html >
<html>
<head>
<base href="<%=basePath%>" />
<jsp:include page="/jsp/admin/common.jsp" />
<jsp:include page="/jsp/formHead.jsp" />
<jsp:include page="/jsp/tableHead.jsp" />
<jsp:include page="/jsp/listHead.jsp" />
<script type="text/javascript" src="<%=basePath%>resource/admin_js/category.js" defer="defer"></script>
<script type="text/javascript" src="<%=basePath%>resource/editor/kindeditor.js"></script>
<script type="text/javascript" src="<%=basePath%>resource/editor/plugins/image/QImage.js" defer="defer"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>resource/admin_css/product.css" />
<script type="text/javascript">
$().ready(function(){

	//后退按钮事件
	$("#backButton").click(function(){
		location.href = basePath + "jsp/admin/product/product_list.jsp";
	});
	
    var $editor = KindEditor.create('#editor_id',{
            uploadJson : '<%=basePath%>admin/product_iamge_upload.do',  
            fileManagerJson : '<%=basePath%>admin/product_iamge_borwser.do',
            allowFileManager : true,
            allowImageUpload : true,
            resizeType : 0,//不许自己调整编辑大小
            autoHeightMode: true, //自动高度模式开启
            afterCreate: function () {
            	this.loadPlugin('autoheight');                     
           	},
            imageSizeLimit : "3078KB"});
	
	$("#form_edit").validate({	//验证配置
		rules : {
			name : "required",
			code : "required",
			price : {
				required : true,
				isFloatGtZero : true
			},
			enter_price : {
				isFloatGtZero : true
			},
			market_price : {
				isFloatGtZero : true
			},
			count : {
				digits : true
			}
		},
		messages : {
			price : {
				isFloatGtZero : "输入金额必须大于0"
			},
			enter_price : {
				isFloatGtZero : "输入金额必须大于0"
			},
			market_price : {
				isFloatGtZero : "输入金额必须大于0"
			}
		}
	});
	
	QListBox.init("#product_category", {css:{width: "188px"}, defaultItem:{text:"请选择",value:-1}});
	
	$(".tab li>input").bind("click", function(){

		var index = $(".tab li>input").index($(this));
		
		if(index == 1){

			var _value = QListBox.get("#product_category").getValue();
			if(_value == -1){

				var type = "error",content = "请先选择商品分类";	//提示语内容
				$.message(type, content);
				return;
			}
		} 
		
		$(".tab li>input").removeClass("current");
		$(this).addClass("current");
		$("table.tabContent").hide();
		$("table.tabContent").eq(index).show();
	});

	//添加图片
	$("#addProductImage").bind("click", function(){

		$editor.loadPlugin('QImage', function() {
			$editor.plugin.QImageDialog({
				imageUrl : "",
				clickFn : function(url, seq, title, width, height, border, align) {
					$editor.hideDialog();
					if(!url) return false;

					createImage(url, seq, title);
					sortImage();
				}
			});
		});

	});

	function createImage(url, seq, title, id){

		var $td1 = $("<td><img width='80px' height='80px' src='' class='ke-img'/>" + 
					 "<input type='hidden' class='urlP'/></td>"),
			$td2 = $("<td><input type='text' class='text seq'/></td>"),
			$td3 = $("<td><input type='text' class='text title'/></td>"),
			$td4 = $("<td><input type='hidden' class='id'/><a href='javascript:void(0)'>删除</a></td>"),
			$tr = $("<tr class='imageItem'/>"),
			$table = $("#imageList");

		$td1.children("input").attr("value", url);
		$td1.children("img").prop("src", url).attr("title", title).attr("alt", title);
		$td2.children("input").attr("value", seq);
		$td3.children("input").attr("value", title);
		if(id) $td4.children("input").attr("value", id);
		$tr.append($td1).append($td2).append($td3).append($td4);
		$table.append($tr);

		$td4.children("a").bind("click", function(){
			$(this).closest("tr").remove();
			sortImage();
		});
	}

	function sortImage(){

		var $table = $("#imageList"),
			$imageItems = $("#imageList .imageItem");
		$imageItems = $imageItems.sort(function(item1, item2){
			var val1 = $(item1).find(".seq").val(),
				val2 = $(item2).find(".seq").val();
			return val1 - val2;
		});
		$.each($imageItems, function(key, val){
			$(val).find(".id").attr("name", "images[" + key + "].id");
			$(val).find(".urlP").attr("name", "images[" + key + "].url");
			$(val).find(".seq").attr("name", "images[" + key + "].seq");
			$(val).find(".title").attr("name", "images[" + key + "].title");
			$table.append(val);
		});

		$table.find(".seq").each(function(){
			$(this).rules("add", {digits : true});
		});
	}
	
	//商品分类查询
	var $search = QSearch.init("<%=basePath%>admin/category_list.do", "json");
	$search.setPageNum(1);
	$search.setPageSize(100);
	$search.onSearch(function(_result){
		var list = category_sort(_result.page),
			items = [];
		for(var i=0, len=list.length; i<len; i+=1){
			
			if(list[i]["grade"] == 1){
				items.push({value:list[i]["id"], text: list[i]["name"], disabled : true});
			} else if(list[i]["grade"] == 2){
				items.push({value:list[i]["id"], text: list[i]["name"], "class": "category_2nd"});
			}
		}
		QListBox.get("#product_category").refresh(items);
		QListBox.get("#product_category").onSelected(function(_value){
			$("input[name='category']").val(this.getValue());
			initProductParam();
		});
	});
	$search.doSearch();

	//判断是否是编辑状态
	var in_edit = ${!empty entity.id};
	
	if(in_edit){

		//初始化商品介绍内容
		try{
			$editor.html('${entity.content }');

			<c:forEach var="img" items="${entity.images}">
				createImage("${img.url}", "${img.seq}", "${img.title}", ${img.id});
			</c:forEach>
			sortImage();
		} catch(e){}
		$("div.path").append("<span>商品修改</span>");
	} else {
		$("div.path").append("<span>商品添加</span>");
	}
});

function initProductParam(){
	var $search = QSearch.init("<%=basePath%>admin/category_list.do", "json");
	$search.setPageNum(1);
	$search.setPageSize(100);
	$search.onSearch(function(_result){});
	$search.doSearch();
}
</script>
</head>
<body>
	<div class="path">
		<a href="">首页</a> &raquo;
	</div>
	<form id="form_edit" action="<%=basePath %>admin/product_save.do" method="post" enctype="multipart/form-data">
		<ul id="tab" class="tab">
			<li>
				<input type="button" value="基本信息" class="current"/>
			</li>
			<li>
				<input type="button" value="商品参数" />
			</li>
			<li>
				<input type="button" value="商品介绍" />
			</li>
			<li>
				<input type="button" value="商品图片" />
			</li>
		</ul>
		<table class="input tabContent">
			<tr>
				<th>
					商品分类:
				</th>
				<td>
					<div id="product_category"></div>
					<input type="hidden" name="category" value=""/>
					<input type="hidden" name="id" value="${entity.id }"/>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>名称:
				</th>
				<td>
					<input type="text" name="name" class="text" maxlength="200" value="${entity.name }"/>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>编号:
				</th>
				<td>
					<input type="text" name="code" class="text" maxlength="200" value="${entity.code }"/>
				</td>
			</tr>
			<tr>
				<th>
					成本价:
				</th>
				<td>
					<input type="text" name="enter_price" class="text" maxlength="200" value="${entity.enter_price }"/>
				</td>
			</tr>
			<tr>
				<th>
					<span class="requiredField">*</span>销售价:
				</th>
				<td>
					<input type="text" name="price" class="text" maxlength="200" value="${entity.price }"/>
				</td>
			</tr>
			<tr>
				<th>
					市场价:
				</th>
				<td>
					<input type="text" name="market_price" class="text" maxlength="200" value="${entity.market_price }"/>
				</td>
			</tr>
			<tr>
				<th>
					库存:
				</th>
				<td>
					<input type="text" name="count" class="text" maxlength="200" value="${entity.count }"/>
				</td>
			</tr>
			<c:if test="${!empty entity.id }">
			<tr>
				<th>
					创建日期:
				</th>
				<td>
					<input type="text" name="create_date" class="text" maxlength="200" value="${entity.create_date }" disabled="disabled"/>
				</td>
			</tr>
			<tr>
				<th>
					修改日期:
				</th>
				<td>
					<input type="text" name="modify_date" class="text" maxlength="200" value="${entity.modify_date }" disabled="disabled"/>
				</td>
			</tr>
			</c:if>
			<tr>
				<th>
					设置:
				</th>
				<td>
					<label>
						<input type="checkbox" value="true" checked="checked" />是否上架
						<input type="hidden" name="isMarketable" value="1" />
					</label>
				</td>
			</tr>
		</table>
		<table class="input tabContent" style="display:none;">
		</table>
		<table class="input tabContent" style="display:none;">
			<tr>
				<td colspan="4" style="padding-left: 50px;">
					<textarea id="editor_id" name="content" style="width:750px;height:450px;">
					</textarea>
				</td>
			</tr>
		</table>
		<table class="input tabContent" style="display:none;" id="imageList">
			<tr>
				<td colspan="4">
					<a href="javascript:;" id="addProductImage" class="button">增加图片</a>
				</td>
			</tr>
			<tr class="title">
				<td>文件</td>
				<td>排序</td>
				<td>标题</td>
				<td>操作</td>
			</tr>
		</table>
		<table class="input">
			<tr>
				<th>
					&nbsp;
				</th>
				<td>
					<input type="submit" class="button" value="确定" />
					<input type="button" id="backButton" class="button" value="返回" />
				</td>
			</tr>
		</table>
	</form>
</body>
</html>